<template>
  <div class="Import">
    <Dialog v-model:visible="visible" title="导入" @handleClickConfirm="handleConfirm" :showCancel="true">
      <el-link type="primary" :icon="Document" @click="downloadFile" style="margin-bottom: 25px;">下载模板</el-link>
      <div style="display: flex; align-items: center;" v-if="deptShow">
        <span>部门：</span>
        <el-tree-select
          v-model="deptValue"
          :data="list"
          placeholder="请选择部门"
          size="large"
          check-strictly
          style="width: 280px;"
          :props="{value:'label', label:'label', children:'children'}"
          :render-after-expand="false"
        />
      </div>
      <el-upload
        v-model:file-list="fileList"
        class="upload-demo"
        action=""
        :auto-upload="false"
      >
        <el-button  :icon="Upload" size="large" style="margin-top: 20px;">选择文件</el-button>
      </el-upload>
      <div class="description">
        <p class="description_title">说明：</p>
        <div class="description_content">
          <p>1、请先下载Excel模板，填写信息后保存，然后点击选择文件按钮，选择保存的Excel文件，点击开始导入按钮进行导入。</p>
          <p>2、Excel内的以下列为必填项：{{ required }}</p>
          <p>3、Excel内的以下列为选填项：{{ notRequired }}</p>
        </div>
      </div>
    </Dialog>
  </div>
</template>
<script setup>
  import { Document,Upload } from '@element-plus/icons-vue';
  import tableDataJson from "@/data/app/institution/deptData.json";
  const visible = ref(false);
  const deptValue = ref("");
  const fileList = ref([])
  provide("confirmText", "开始导入");
  const required = inject("required", "");
  const notRequired = inject("notRequired", "");
  const deptShow = inject("deptShow", true);
  const list = ref(tableDataJson.data);
  const { proxy } = getCurrentInstance();
  const init = () => {
    visible.value = true;
    fileList.value = [];
    deptValue.value = "";
  }
  const handleConfirm = () => {
    visible.value = false;
    proxy.$modal.msgSuccess("导入成功");
  }
  const downloadFile = () => {
    proxy.$modal.msgSuccess("下载成功");
  }
  defineExpose({
    init
  })
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.description{
  &_title{
    color: #409eff;
    padding:20px 0 15px;
    border-bottom: 1px solid #eee;
  }
  &_content{
    & > P {
      padding:8px 0;    
      line-height: 25px;
    }
  }
}
</style>
